<template>
    <div id='myWorks'>
        <div class='filter-container'>
            <el-radio-group v-model='queryParams.status' @change='changeStatusHandler'>
                <el-radio :label='-1'>全部</el-radio>
                <el-radio :label='0'>待审核</el-radio>
                <el-radio :label='1'>审核通过</el-radio>
                <el-radio :label='2'>被驳回</el-radio>
            </el-radio-group>
        </div>
        <div class='msg-container'>
            <div class='header-info'>
                <el-form :model='queryParams' @keydown.enter.prevent='queryHandler'>
                    <el-input v-model='queryParams.title' clearable placeholder='搜索作品' @clear='clearHandler' />
                </el-form>
            </div>
            <!--        作品列表-->
            <div v-if='worksList.length' class='competition-list'>
                <div v-for='works in worksList' :key='works.worksId' class='competition-item'>
                    <!--操作遮罩层-->
                    <div v-if='works.status !== 2' class='modal'>
                        <img v-if='works.status === 1' title='查看作品' src='@/assets/my/look.png' alt='查看'
                            @click='$router.push(`/worksDetail/${works.worksId}?judgeIds=${works.judgeIds}`)'>
                        <img v-if='works.status !== 1' src='@/assets/my/edit.png' title='提交作品' alt='编辑'
                            @click='openPublishWorks(works.worksId)'>
                    </div>
                    <!--        提交作品-->
                    <publishWorks v-model='open' :init-form='form' :competitionId='works.competitionId'
                        @success='successHandler' />
                    <img class='cover' src='@/assets/images/login-background.jpg' alt='cover'>
                    <div class='main-content'>
                        <div class='top'>
                            {{ works.title }}
                        </div>
                        <div class='bottom'>
                            <div class='count-info'>
                                <div class='count'>
                                    <img src='@/assets/index/look.png' alt='look'>
                                    <span>{{ handleCount(works?.views || 0) }}</span>
                                </div>
                                <div class='count'>
                                    <img src='@/assets/index/collect.png' alt='collect'>
                                    <span>{{ handleCount(works?.collect || 0) }}</span>
                                </div>
                            </div>
                            <div v-if='works.status === 0' class='status'>待审核</div>
                            <div v-else-if='works.status === 1' class='status' style='color:#67C23A;'>审核通过</div>
                            <div v-else-if='works.status === 2' class='status' style='color:#F56C6C;'
                                @click='openPublishWorks(works.worksId)'>
                                <span class='text'>被驳回</span>
                                <el-tooltip effect='dark' :content='works.reason' placement='top'>
                                    <el-icon size='20'>
                                        <InfoFilled />
                                    </el-icon>
                                </el-tooltip>
                            </div>
                            <div v-else class='status'></div>
                        </div>
                    </div>
                </div>
            </div>
            <div v-else-if='!queryParams.title && !worksList?.length' class='competitions empty'>
                暂无作品
            </div>
            <div v-else-if='queryParams.title && !worksList?.length && queried' class='competitions empty'>
                没有找到关键字[<span style='color: #E65D6E;'>{{ queryParams.title }}</span>]下的相关作品
            </div>
            <div v-else class='competitions empty'>
                暂无作品
            </div>

            <!--            分页-->
            <div class='pagination'>
                <pagination v-show='total > 0' v-model:limit='queryParams.pageSize' v-model:page='queryParams.pageNum'
                    :total='total' layout='total, prev, pager, next' @pagination='getList' />
            </div>

        </div>

    </div>
</template>
<script setup lang='ts'>
import { reactive, ref, toRefs } from 'vue';
import { handleCount } from '@/utils/sk';
import { getMyWorks, getWorks } from '@/api/business/works';
import { Works } from '@/api/model/Works';
import publishWorks from '@/components/JhPublishWorks/index.vue';

const worksList = ref<Works[]>([]);
const queried = ref(false);
const total = ref(0);
const open = ref(false);
/*请求参数定义*/
const data = reactive<{ form: any, queryParams: any }>({
    form: {},
    queryParams: { pageNum: 1, pageSize: 4, title: '', status: -1 }
});
const { form, queryParams } = toRefs(data);

/*获取我的作品列表*/
const getList = () => {
    if (queryParams.value.status === -1) {
        delete queryParams.value.status;
    }
    getMyWorks(queryParams.value).then(res => {
        worksList.value = res.rows;
        total.value = res.total;
    });
    if (typeof queryParams.value.status === 'undefined') {
        queryParams.value.status = -1;
    }
};
/*切换作品状态*/
const changeStatusHandler = () => {
    queryParams.value.pageNum = 1;
    getList();
};
/*查询*/
const queryHandler = () => {
    queried.value = true;
    queryParams.value.pageNum = 1;
    getList();
};
/*清除*/
const clearHandler = () => {
    queried.value = false;
    queryParams.value.title = '';
    queryParams.value.pageNum = 1;
    getList();
};
/*打开提交作品弹出层*/
const openPublishWorks = (worksId: number | string) => {
    /*获取作品详细*/
    getWorks(worksId).then(res => {
        form.value = res.data;
        open.value = true;
    });
};
/*作品提交成功的回调*/
const successHandler = () => {
    open.value = false;
    form.value = {};
    getList();
};
getList();
</script>
<style scoped lang='scss'>
.msg-container {
    border: 1px solid #efefef;
    padding: 20px;
    min-height: 450px;

    .header-info {
        display: flex;
        align-items: center;
        justify-content: space-between;

        :deep(.el-input__wrapper) {
            box-shadow: none;
            background: #F2F6FC;
        }
    }
}

.competition-list {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;

    .count-info {
        display: flex;
    }

    .top {
        @include ellipsisOption(2);
    }

    .bottom {
        display: flex;
        justify-content: space-between;

        .count {
            display: flex;

            img {
                margin-right: 6px;
            }

            &:first-child {
                margin-right: 20px;
            }
        }
    }

    .competition-item {
        background: #F2F6FC;
        border-radius: 4px;
        display: flex;
        width: calc(50% - 54px);
        margin-right: 108px;
        padding: 10px;
        margin-bottom: 10px;
        position: relative;
        overflow: hidden;
        transition: all 0.3s;

        &:hover {
            box-shadow: var(--el-box-shadow);

            .modal {
                opacity: 1;
            }
        }

        .modal {
            position: absolute;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            top: 0;
            left: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: all 0.3s;
            z-index: 1;

            img {
                width: 50px;
                height: 50px;
                margin: 0 10px;
                cursor: pointer;
            }

        }

        .status {
            font-size: 14px;
            font-weight: 400;
            color: #E6A23C;
            display: flex;
            align-items: center;

            .text {
                margin-right: 4px;
            }

            i {
                cursor: pointer;
            }
        }

        &:nth-child(2n) {
            margin-right: 0;
        }

        .cover {
            width: 100px;
            height: 100px;
            border-radius: 4px;
        }
    }

    .main-content {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 6px 0;
        margin-left: 10px;
        flex: 1;
    }
}
</style>
